<template>
    <div class="pay-status simple-page">
        <van-row class="wrapper">
            <template v-if="status === 'success'">
                <van-row class="pay-status-img-box">
                    <img src="~assets/img/order/success.png" />
                </van-row>
                <van-row class="text">
                    <van-row class="text-title">支付成功</van-row>
                    <van-row class="text-row">支付方式：
                        <span>{{ $route.query.pay_way }}</span>
                    </van-row>
                    <van-row class="text-row">支付金额：
                        <span>&yen;{{ $route.query.pay_fee | formatPrice }}</span>
                    </van-row>
                </van-row>
            </template>
            <template v-else>
                <van-row class="pay-status-img-box">
                    <img src="~assets/img/order/failed.png" />
                </van-row>
                <van-row class="text">
                    <van-row class="text-title">支付失败，请重新支付</van-row>
                </van-row>
            </template>
            <van-row class="button-group">
                <van-col span="12" class="back-button">
                    <router-link :to="{ name: 'orderList' }">查看订单</router-link>
                </van-col>
                <van-col span="12" class="refresh-button" v-if="status === 'success'">
                    <router-link :to="{ name: 'goodsList' }" @click.native="$router.go(0)" replace>继续购物</router-link>
                </van-col>
                <van-col span="12" class="refresh-button" v-else>
                	<span @click="show_pay">重新支付</span>
                	<!--<router-link :to="{ name: 'goodsList' }" @click.native="$router.go(0)" replace>继续购物</router-link>-->
                	<!--<router-link :to="" @click="hidePay" replace></router-link>-->
                </van-col>
            </van-row>
        </van-row>
        <PayItem 
			:payShow = "payShow"
			:total = "$route.query.pay_fee"
			:wallet = "walletBalance"
			@pay = "pay"
			@getRadio = "getRadio"
			@hidePay = "hidePay"
		/>
    </div>
</template>

<script>
import { mapGetters, mapActions, mapState } from "vuex";
import PayItem from "@/components/pay-item";
import { payOrder } from "@/api/pay/index";
export default {
  name: "orderPayResult",
  data() {
    return {
      orderId: 0,
      status: "",
      payShow: false,
      typeName: 1
    };
  },
  components: {
    PayItem
  },
  created() {
    this.getData();
    this.getMemberInfo();
  },
  computed: {
    ...mapGetters(["walletBalance", "contactMobile"])
  },
  methods: {
    ...mapActions(["getMemberInfo"]),
    getData() {
      this.orderId = this.$route.query.orderId;
      this.status = this.$route.query.status;
    },
    show_pay() {
      this.payShow = true;
    },
    hidePay() {
      this.payShow = false;
    },
    pay() {
      if (this.typeName == 2) {
        if (this.$route.query.id != "") {
          this.$router.push({
            name: "orderMemberValidate",
            query: { phone: this.contactMobile, id: this.$route.query.orderId }
          });
        } else {
          Toast("提交失败,商品ID不存在");
        }
      } else {
        payOrder(this.typeName, this.$route.query.orderId)
          .then(res => {
            if (res.status == "1") {
              Toast(res.message);
            }
            if (res.data.ali_link != "") {
              window.location.href = res.data.ali_link;
            }
          })
          .catch(() => {});
      }
    },
    getRadio(name) {
      this.typeName = name;
    }
  }
};
</script>


<style lang="scss" scoped>
@import "../../styles/color.scss";
.pay-status {
  .pay-status-img-box {
    padding: 0.6rem 0 0.2rem;
    img {
      width: 0.8rem;
    }
  }
  .text {
    span {
      color: $priceColor;
    }
  }
}
</style>
